<template>
  <el-card shadow="never" class="page-card">
    <div class="header">
      <el-select v-model="periodType" placeholder="周期类型" class="mr-2" size="large">
        <el-option label="月度" value="month" />
        <el-option label="季度" value="quarter" />
      </el-select>
      <el-input
        v-model="search"
        placeholder="请输入关键字"
        prefix-icon="el-icon-search"
        class="search-input"
        size="large"
        clearable
      />
    </div>
    <div class="plan-list">
      <el-card
        v-for="plan in plans"
        :key="plan.id"
        class="plan-card"
        shadow="hover"
      >
        <div class="plan-main">
          <div>
            <span class="plan-title">{{ plan.planName }}</span>
            <el-tag type="success" effect="plain" class="ml-2">{{ plan.cycleType }}</el-tag>
            <div class="plan-desc">考核范围：{{ plan.deptName }}</div>
            <div class="plan-desc">考核周期：{{ plan.cycle }}</div>
          </div>
          <div class="plan-progress">
            <el-statistic title="考核总人数" :value="plan.allEmployeeNum" />
            <el-statistic title="评分中" :value="plan.unCompletedEmployeeNum" />
            <el-statistic title="已完成" :value="plan.completedEmployeeNum" />
          </div>
          <div class="plan-actions">
            <el-link type="primary" @click="goDetail(plan.deptId,plan.planName)">查看详情</el-link>
            <el-link class="ml-2" @click="goplan()">设置</el-link>
            <el-link type="danger" class="ml-2" @click="finishAssessment(plan.id)">终止考核</el-link>
          </div>
        </div>
      </el-card>
    </div>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { get } from '@/api/jixiao/assessmentProgress/index.js'
import { updatePlan } from '@/api/jixiao/plan'
import { delete111 } from '@/api/jixiao/assessmentProgress/index.js'

const router = useRouter()
const periodType = ref('')
const search = ref('')
const plans = ref([
  {
    id: 1,
    planName: '销售组考核计划',
    cycleType: '月度',
    deptName: '销售1组；销售2组',
    cycle: '2022年1月-2022年3月',
    allEmployeeNum: 40,
    unCompletedEmployeeNum: 100,
    completedEmployeeNum: 20,
    deptId:1
  },
  // ...更多数据
])
onMounted(() => {
  // 模拟获取数据
  fetchPlans()
})
function fetchPlans() {
//   这里可以调用API获取考核计划数据
  get().then(response => {
    console.log(response.rows)
    plans.value = response.rows
  })
}

function goplan() {
  router.push({ name: 'plan' })
}

function finishAssessment(id) {
  // 模拟终止考核操作
  console.log(id)
    updatePlan({ id, status: '已完成' }).then(() => {
        // 刷新列表
        fetchPlans()
    })
    delete111({id:id}).then(() => {
      // 刷新列表
      fetchPlans() 
    })

}
function goDetail(id,employeeName) {
  router.push({ name: 'detail', query: { id:id ,employeeName:employeeName } })
}
</script>

<style scoped>
.page-card {
  max-width: 1100px;
  margin: 32px auto;
  padding: 32px 24px;
  background: #f8fafc;
  border-radius: 16px;
  border: none;
}
.header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.mr-2 { margin-right: 16px; }
.search-input { flex: 1; }
.plan-list { display: flex; flex-direction: column; gap: 20px; }
.plan-card {
  border-radius: 12px;
  border: none;
  background: #fff;
  transition: box-shadow 0.2s;
}
.plan-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.plan-title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
}
.plan-desc {
  color: #888;
  font-size: 14px;
  margin-top: 4px;
}
.plan-progress {
  display: flex;
  gap: 24px;
}
.plan-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.ml-2 { margin-left: 8px; }
@media (max-width: 900px) {
  .plan-main { flex-direction: column; align-items: flex-start; gap: 16px; }
  .plan-progress { gap: 12px; }
  .plan-actions { flex-direction: row; gap: 12px; align-items: center; }
}
</style>